<template>
    <div class="invite">
        <van-nav-bar :title="$t('my.invite_link')" leftArrow @click-left="_return"/>
        <div class="inviteMain">

            <b v-if="tipShow"><img :src="sign" alt=""><span>{{$t('info.actived')}}</span></b>
            <p>{{$t('my.invite_code')}}<span>{{address.invcode}}</span><button class="inviteCode" :data-clipboard-text="address.invcode" @click="copyInviteCode">{{$t('charge.copy')}}</button></p>
            <qrcode class="code" :value="inviteUrl" :options="{ size: 190 }"></qrcode>
            <span class="tip">{{$t('my.invite_remind')}}</span>
            <div class="btns">
                <button class="btn tag-read" @click="copy" :data-clipboard-text="inviteUrl">{{$t('my.button_left')}}</button>
            </div>
        </div>
    </div>
</template>

<script>
    import Clipboard from 'clipboard';
    export default {
        data() {
            return {
                address:'',
                inviteUrl:'',
                sign:require('../../assets/sign.png'),
                tipShow:false,
                brief:''
            }
        },
        methods: {
            _return(){
                this.$emit('_return')
            },
            copy(){
                let clipboard = new Clipboard('.tag-read')
                clipboard.on('success', e => {
                    this.$toast('复制成功')
                    clipboard.destroy()
                })
                clipboard.on('error', e => {
                    this.$toast('该浏览器不支持自动复制')
                    clipboard.destroy()
                })
            },
            copyInviteCode(){
                let clipboard = new Clipboard('.inviteCode')
                clipboard.on('success', e => {
                    this.$toast('复制成功')
                    clipboard.destroy()
                })
                clipboard.on('error', e => {
                    this.$toast('该浏览器不支持自动复制')
                    clipboard.destroy()
                })
            },
            getLink(){
                this.$api.post('user/invitation')
                    .then(res =>{
                        this.address = res.detail
                        this.inviteUrl = `http://m.aat.ink/#/register?inviteCode=${res.detail.invcode}`
                    })
                this.$api.post('resonate/active')
                    .then(res =>{
                        this.brief = this.imgHost + res.detail.jj
                        if(res.detail.status >= 2){
                            this.tipShow = false
                        }else{
                            this.tipShow = true
                        }
                    })
            }
        },
        created() {
            this.getLink()
        },
        beforeCreate: function() {
                document.getElementsByTagName("body")[0].className="bodyactives";
            },
        beforeDestroy: function() {
            document.body.removeAttribute("class","active");
        },
        mounted() {
            this.$emit('disappear')
        },
    }
</script>
<style lang="stylus">
 .bodyactives
         height 100%
         background #ebebeb
</style>
<style lang="stylus" scoped>
    font = #CBAF89
    [class*=van-hairline]::after{
        border: none;
    }
    .bodyactives
         height 100%
         background #ebebeb
    .invite
        height 100%
    .inviteMain
        width 94%
        margin 0 auto
        overflow hidden
        border-radius 5px
        margin-top 20px
        background #fff
        border 1px solid #ebebeb
        p
            text-align center
            margin-top 25px
            color #23ba92
            font-size 16px
            position relative
            span
                display block
                margin-top 15px
            button
                border none
                background linear-gradient(90deg, #ff7a67 0%, #f6543e 100%);
                outline none
                border-radius 5px
                padding 3px 8px
                color white
                position absolute
                bottom 0
                right 80px
                font-size 10px
        b
            width 84%
            margin 25px auto 0
            font-weight normal
            color #FF7E7E
            display flex
            display -webkit-flex
            align-items center
            img
                width 20px
            span
                margin-left 5px
        .code
            display block
            margin 18px auto 0
        .tip
            display block
            text-align center
            font-size 12px
            color #2d2d2d
            margin-top 15px
        .btns
            width 84%
            margin  18px auto 40px
            .btn
                color #fff
                height 40px
</style>